import type { TableColumn, FormField } from '@/components'
import { reactive } from 'vue'
import { getOptionsLabelFn } from '@/utils/methods'

export const fields = reactive<FormField[]>([
  {
    key: 'menuName',
    label: '功能名称',
    tag: 'ElInput'
  }
])

const menuTypeOptions = [
  {
    label: '菜单',
    value: 'C'
  },
  {
    label: '按钮',
    value: 'F'
  }
]

export const columns: TableColumn[] = [
  {
    key: 'label',
    label: '功能名称'
  },
  {
    key: 'backEndPerms',
    label: '后端权限名称'
  },
  {
    key: 'frontEndPerms',
    label: '前端权限名称'
  },
  {
    key: 'menuType',
    label: '功能类型',
    customRender: getOptionsLabelFn(menuTypeOptions)
  },
  {
    key: 'actions',
    label: '操作',
    slot: true,
    fixed: 'right'
  }
]

export const dialogFields = reactive<FormField[]>([
  {
    key: 'menuName',
    label: '功能名称',
    tag: 'ElInput',
    required: true
  },
  {
    key: 'backEndPerms',
    label: '后端权限名称',
    tag: 'ElInput'
  },
  {
    key: 'frontEndPerms',
    label: '前端权限名称',
    tag: 'ElInput',
    required: true
  },
  {
    key: 'menuType',
    label: '功能类型',
    tag: 'MSelect',
    attrs: {
      options: menuTypeOptions
    },
    required: true
  },
  {
    key: 'orderNum',
    label: '排序',
    tag: 'ElInputNumber',
    required: true,
    attrs: {
      min: 1
    }
  }
])
